/* Home页面 定义了侧边栏、头部、主div*/
<template>
  <!-- 引入container布局 -->
  <el-container class="home-container">
    <!-- 头部信息 -->
    <el-header>
      <!--  头部标题信息-->
      <div class="header-title">
        <!-- 头部icon头像 -->
        <div class="header-icon">
          <img src="../../assets/images/rocket.png" />
          <!-- 头部图片 -->
        </div>
        <span><em>人事管理系统</em></span>

        <!-- 头部标题，将字体显示斜体 -->
      </div>

      <!-- 用户名字 -->
      <div class="header-user">
        <span class="username">欢迎：{{ userName }}</span>
      </div>
      <!-- 用户下拉菜单选择 -->
      <el-dropdown>
        <div class="user-drop">
          <span class="el-dropdown-link">
            <img src="../../assets/images/header.png" />
          </span>
        </div>

        <div class="header-img">
          <!-- header导航栏中用户可选择的参数 -->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><a @click="doJumpPage">个人中心</a></el-dropdown-item
            >
            <el-dropdown-item
              ><a @click="doLogout">退出登录</a></el-dropdown-item
            >
          </el-dropdown-menu>
        </div>
      </el-dropdown>
    </el-header>

    <!-- 主体0508添加固定样式 -->
    <el-container class="main-container" ref="homePage">
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          background-color="#0f2950"
          text-color="#a4bfcf"
          active-text-color="#409eff"
          unique-opened
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <!-- v-for循环item，获取menuList的数据 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menuList"
            :key="item.id"
          >
            <template slot="title">
              <i :class="iconsObject[item.id]"></i
              ><!-- 遍历Icon图标列表数据 -->
              <span style="padding-left: 8px">{{ item.title }}</span>
              <!-- 在页面中显示数据库的title信息 -->
            </template>

            <!-- 二级菜单 ，遍历子菜单数据-->
            <el-menu-item
              :index="item1.path"
              v-for="item1 in item.subMenuList"
              :key="item1.id"
              @click="item1.path;"
            >
              <template slot="title">
                <i :class="iconsObject[item1.id]"></i>
                <span style="padding-left: 8px">{{ item1.title }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体内容 -->
      <!-- 进行路由渲染 -->
      <el-main>
        <div class="nav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/userList' }"
              >用户信息</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/userList' }"
              >员工信息</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/userList' }"
              >考勤信息</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/userList' }"
              >日志管理</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <!-- 设置分割线 -->
        <el-divider></el-divider>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getUserInfo } from "@/api/user/index"; //调用后端的获得用户信息api接口
export default {
  data() {
    return {
      userName: "", //初始化用户名
      clientHeight: "",
      menuList: [], //菜单列表,icon对象，前面数字对应的是数据库中的sid
      //icon头像数组，这里详细用法参考阿里的icon图库
      iconsObject: {
        100: "iconfont icondaohang", //用户服务icon
        200: "iconfont iconyuangongguanli", //员工服务icon
        300: "iconfont icondept", //部门服务icon
        400: "iconfont iconkaoqin1", //考勤服务icon
        500: "iconfont iconhuishouzhanguanli", //回收站管理icon
        101: "iconfont iconyonghu", //首页信息icon
        102: "iconfont iconziyuanxhdpi", //用户列表icon
        103: "iconfont iconxiugai", //修改权限icon
        104: "iconfont iconcaozuorizhi", //日志记录icon
        201: "iconfont iconyonghu", //员工档案icon
        202: "iconfont iconfeiyong", //员工薪资icon
        203: "iconfont iconicon35", //流程审批icon
        204: "iconfont iconbumen", //部门信息icon
        205: "iconfont iconyuangongkaoqintongji", //考勤状况icon
        206: "iconfont iconkaoqintongji", //考勤统计icon
        207: "iconfont iconyonghuhuishouzhan", //用户回收icon
        208: "iconfont iconyonghuhuishouzhan", //员工回收icon
      },
      activePath: "/home", //默认路径为空
    };
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`;
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
    };
    this.queryUserInfo();
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function () {
      this.changeFixed(this.clientHeight);
    },
  },

  //onload加载事件，查询menuList菜单列表
  created() {
    this.getMenuList(); //查询menu列表
    this.activePath = window.sessionStorage.getItem("activePath"); //取出session里activePath的值，动态修改
    this.name = window.sessionStorage.getItem("user"); //存储user的值
  },

  methods: {
    /* 固定header头部不移动 */
    changeFixed(clientHeight) {
      //动态修改样式
      this.$refs.homePage.$el.style.height = clientHeight - 20 + "px";
    },

    //跳转个人页面方法
    doJumpPage() {
      this.$router.push("/personalInfo"); //跳转到个人信息页面
    },

    //退出登录方法
    doLogout() {
      this.$confirm("确定注销并退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "注销成功!",
          });
          window.sessionStorage.clear(); //清除session的值，清空当前token的值
          this.$router.push("/login"); //重定向登录页面
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销操作",
          });
        });
    },
    //获取导航菜单方法
    async getMenuList() {
      const { data: res } = await this.$http.get("sys/user/menus"); //调用后端菜单api接口
      if (res.flag != 200) {
        this.$message.error("获取菜单信息失败");
      }
      this.menuList = res.menus; //将后端传送的数据进行赋值
    },

    //保存路径的值
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath); //存放session值
      this.activePath = activePath;
    },

    //查询用户token状态和当前用户名
    queryUserInfo() {
      var $that = this;
      getUserInfo().then((res) => {
        //获得当前用户的token值
        if (res.code == 200 && res.success == "success") {
          $that.userName = res.data.username; //获得当前登录的用户名
        } else {
          //没有登录，跳转到登录页
          this.$message({
            message: "用户Token信息失效,请重新登录!",
            type: "error",
          });
          this.$router.push("/login"); //重新返回登录页面，进行页面跳转
        }
      });
    },
  },
};
</script>

<style Lang="less" scoped>
/* 主布局样式 */
.home-container {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  text-rendering: optimizeLegibility;
}
/* 主内容布局样式 */
.main-container {
  /* 设置初始高度， */
  height: 500px;
}

/* 4.11添加,头部人事管理样式设置，设置标题颜色、对齐方式、内边距 */
.header-title {
  color: #fffbf1;
  align-items: center;
  padding: 10px 20px;
}

/* 设置头部icon图片样式 */
.header-icon {
  width: 20px;
  height: 20px;
  float: left;
  display: flex;
  padding: 10px;
}
/* header头部——人事管理系统span样式 */
.header-title span {
  margin-left: 5px;
}

/* header-user—— 设置用户名样式 */
.header-user .username {
  height: 60px;
  line-height: 58px;
  font-size: 20px;
  float: right;
  padding-left: 1000px;
}
/* 头部样式 */
.el-header {
  display: flex;
  /*  弹性布局*/
  justify-content: space-between;
  /* 左右贴边 */
  padding-left: 0%;
  /* 左边界 */
  color: #eff1f3;
  /* 设置字体样式 */
  font-size: 30px;
  background-color: #3c8dbc;
}

/* 侧边栏样式 */
.el-aside {
  background-color: #304156;
}

/* 主体样式 */
.el-main {
  background-color: #eaedf1;
}

/* 设置菜单样式,改动了菜单不会随着网页滚动而变的样式 */
.el-menu {
  border-right: none;
  background-color: #0f2950;
  font-size: 50px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 200px;
  top: 60px;
}

/* 设置火箭图片大小 */
img {
  width: 30px;
  height: 30px;
}

/* 设置总div样式 */
div {
  /* display: flex;弹性布局 */
  align-items: center;
}

/* 头部导航栏样式设置 */
.nav {
  padding: 2px;
  margin: 2px;
}

/* 5.1修改样式 */
.user-drop {
  padding: 12px;
}

/* 下拉菜单选择 */
.el-dropdown-link {
  cursor: pointer; /* 设置小手图标 */
  color: aqua;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
